import React, { useState } from 'react'
import axios from 'axios';
import PubSub from 'pubsub-js';

export default function Header() {
    //初始化数据
    const [search,setSearch] = useState('')

    //使用受控表单
    //给表单绑定表单改变事件
    //拿到表单的值设置给表单
     const searchChangeHandle =(e)=>{
        setSearch(e.target.value);
     }   
     
    //  点击按钮发送ajax
     const searchHandle =async ()=>{
        //点击按钮发送ajax
        const result = await axios.get("https://api.github.com/search/users?q=" + search)
        console.log(result);
        //拿到数据传给兄弟组件  List
        //兄弟组件订阅，这边发布
        PubSub.publish("github", result)
    }


  return (
    <section className="jumbotron">
    <h3 className="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" value={search} onChange={searchChangeHandle} placeholder="请输入查找内容"/>
      &nbsp;
      <button onClick={searchHandle}>Search</button>
    </div>
  </section>
  )
}
